<template>
  <div class="screen">
    <mt-search v-model="partTimeJobName" cancel-text="取消" placeholder="搜索">
    </mt-search>
    <div id="carousel">
      <mt-swipe>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/image1.png" />
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/image2.jpg"/>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/image3.jpg"/>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="img_div">
            <img class="img" src="../../../assets/image/image4.jpg" />
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div id="type_div_outside">
      <div class="type_div" @click="getLongTermJob">
        <div>
          <img src="../../../assets/image/work.svg" class="commentAvatarImage">
        </div>
        <div>长期兼职</div>
      </div>
      <div class="type_div" @click="getBellWork">
        <div>
          <img src="../../../assets/image/clock.svg" class="commentAvatarImage">
        </div>
        <div>钟点工</div>
      </div>
      <div class="type_div" @click="getNearbyJob">
        <div>
          <img src="../../../assets/image/position.svg" class="commentAvatarImage">
        </div>
        <div>附近兼职</div>
      </div>
      <div class="type_div" @click="getInternship">
        <div>
          <img src="../../../assets/image/work2.svg" class="commentAvatarImage">
        </div>
        <div>实习兼职</div>
      </div>
    </div>
    <div class="littleInterval"></div>
    <div id="list_title">
      <div id="list_left">职位列表</div>
      <div id="list_right"><span id="recommend_span" :class="{ href_span:isRecomment}" @click="getList(0)">推荐</span><span id="latest_span" :class="{href_span: isLatest}" @click="getList(1)">最新</span></div>
    </div>
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">琶洲展会兼职</span><span class="span_price">120元/天</span></div>
        <div class="list_3_div"><span class="county">海珠</span><span class="time_slot">3月13日-3月31日</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">手机wifi兼职/在家可做/日结</span><span class="span_price">200元/天</span></div>
        <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">长期接受报名</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">手机wifi兼职/在家可做/日结</span><span class="span_price">200元/天</span></div>
        <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">长期接受报名</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" @click="showDetail">
        <div class="list_2_div"><span class="span_title">若比邻超市店员兼职</span><span class="span_price">15元/小时</span></div>
        <div class="list_3_div"><span class="county">天河</span><span class="time_slot">长期接受报名</span></div>
        <div class="littleInterval"></div>
      </div>
      <div class="list_1_div" v-for="item in list" @click="showDetail">
        <div class="list_2_div"><span class="span_title">若比邻超市店员兼职</span><span class="span_price">15元/小时</span></div>
        <div class="list_3_div"><span class="county">天河</span><span class="time_slot">长期接受报名</span></div>
        <div class="littleInterval"></div>
      </div>
    </mt-loadmore>
  </div>
</template>

<script>
  $(function () {
    console.log($(".mint-loadmore-content"));
    $(".mint-loadmore-content").attr("overflow","scroll").attr("height","100%");
    console.log($(".mint-loadmore-content"));
  })
    export default {
        name: "HomePage",
    data(){
          return {
            length:10,
            list:[1,2,3,4,5,6,7,8,9,0],
            allLoaded:false,
            isRecomment:true,
            isLatest:false,
            partTimeJobName:''
          }
      },
      methods:{
        loadBottom() {
        // 加载更多数据
          for (let i = 1; i <= 10; i++) {
            this.list.push(i);
          }
          //this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
        },
        getList(type){
          if(type==0){
            this.isRecomment=true;
            this.isLatest=false;
          }else{
            this.isRecomment=false;
            this.isLatest=true;
          }
        },
        getLongTermJob(){
          this.$router.push({path:'/longTermJob'});
        },
        getBellWork(){
          this.$router.push({path:'/bellWork'});
        },
        getNearbyJob(){
          this.$router.push({path:'/nearbyJob'});
        },
        getInternship(){
          this.$router.push({path:'/internship'});
        },
        showDetail(){
          this.$router.push({path:'/jobMessage'});
        }
      }
    }
</script>

<style>
  .screen .mint-loadmore-content {
    overflow: scroll;
    height: 100%;
  }
  .screen .mint-search{
    height: 0%;
  }
  .screen .mint-search .mint-searchbar {
    position: fixed;
    width: 100%;
    opacity: 0.8
  }
</style>
<style scoped>
  #carousel{
    height: 30%;
  }
  #type_div_outside{
    margin-top: 1rem;
  }
  #list_title{
    height: 4rem;
    line-height: 4rem;
  }
  #list_left{
    font-size: larger;
    display: inline-block;
    float: left;
    margin-left: 1rem;
  }
  #list_right{
    display:inline-block;
    float: right;
  }
  #list_right span{
    margin-right: 1rem;
  }
  #list_content_outside{
    height: calc(100% - 5rem);
  }
  .img_div{
    height: 100%;
  }
  .img{
    height: 100%;
    width: 100%;
  }
  .type_div{
    width: 24%;
    display: inline-block;
  }
  .commentAvatarImage{
    width: 50%;
  }
  .littleInterval{
    height: 1rem;
    background-color: rgba(169, 169, 169, 0.08);
  }
  .list_2_div{
    font-size: large;
    font-weight: bold;
    text-align: left;
    line-height: 5rem;
  }
  .span_title{
    margin-left: 1rem;
  }
  .span_price{
    float: right;
    margin-right: 1rem;
    color: #ff862a;
  }
  .list_3_div{
    text-align: left;
    line-height: 3rem;
  }
  .county{
    margin-left: 1rem
  }
  .time_slot{
    margin-left: 1rem;
  }
  .mint-loadmore {
    height: 48vh;
  }
  .href_span {
      color: #38d8ff;
    }
</style>
